<template>
  <el-button plain type="primary" @click="handleAddGroup">
    新增变量
  </el-button>
  <el-button plain type="primary" @click="back2top">
    返回模板列表
  </el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="variableName" label="变量名" width="300"/>
    <el-table-column prop="variableType" label="变量类型" width="300"/>
    <el-table-column prop="defaultValue" label="变量默认值" width="300"/>
    <el-table-column fixed="right" label="Operations" min-width="300">
      <template #default="scope">
        <el-button link type="primary" @click="handleUpdateGroup(scope)">
          编辑
        </el-button>
        <el-popconfirm title="是否确认删除?" @confirm="handleDeleteGroup(scope)">
          <template #reference>
            <el-button link type="primary">
              删除
            </el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <el-form :model="form">
      <el-form-item label="变量名" :label-width="formLabelWidth">
        <el-input v-model="form.variableName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="变量类型" :label-width="formLabelWidth">
        <el-input v-model="form.variableType" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="变量默认值" :label-width="formLabelWidth">
        <el-input v-model="form.defaultValue" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveGroupChange">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {instance} from '@/api/base'
import {onMounted, reactive, ref} from 'vue'

import {useRoute, useRouter} from 'vue-router'

import {listGroupVariableByGroupId} from '@/api/request'

const route = useRoute()
const router = useRouter()

const groupData = ref({})

const tableData = ref([])
const dialogFormVisible = ref(false)
const formLabelWidth = ref('140px')
const formTitle = ref('')
const form = reactive({
  pkid: '',
  groupId: '',
  variableName: '',
  variableType: '',
  defaultValue: '',
})
const handleAddGroup = () => {
  form.pkid = ''
  form.variableName = ''
  form.variableType = ''
  form.defaultValue = ''
  formTitle.value = '新增'
  dialogFormVisible.value = true
}

const handleUpdateGroup = (scope) => {
  const selectItem = tableData.value[scope.$index]
  form.pkid = selectItem.pkid
  form.variableName = selectItem.variableName
  form.variableType = selectItem.variableType
  form.defaultValue = selectItem.defaultValue
  formTitle.value = '编辑'
  dialogFormVisible.value = true
}

const saveGroupChange = () => {
  saveGroupVariable()
}

const handleDeleteGroup = (scope) => {
  deleteGroupVariable(tableData.value[scope.$index].pkid)
}

const deleteGroupVariable = (id) => {
  instance.post('/groupVariable/deleteGroupVariable?id=' + id).then((res) => {
    console.log(res)
    listGroupVariable()
  }).catch((err) => {
    console.log(err)
  })
}

const saveGroupVariable = () => {
  instance.post('/groupVariable/saveGroupVariable', {
    pkid: form.pkid,
    groupId: groupData.value,
    variableName: form.variableName,
    variableType: form.variableType,
    defaultValue: form.defaultValue,
  }).then((res) => {
    console.log(res)
    listGroupVariable()
    dialogFormVisible.value = false
  }).catch((err) => {
    console.log(err)
  })
}

const listGroupVariable = () => {
  listGroupVariableByGroupId({
    groupId: groupData.value,
  }).then((res) => {
    console.log(res)
    tableData.value = [...res.data.data]
  }).catch((err) => {
    console.log(err)
  })
}

const back2top = () => {
  router.push({name: 'modelList'})
}

onMounted(() => {
  console.log(route)
  console.log(route.query.groupId)
  groupData.value = route.query.groupId
  if (!groupData.value) {
    router.push({name: 'modelList'})
  }
  listGroupVariable()
})

</script>

<style scoped>


</style>
